"use client"
import React from 'react';
import { Check } from 'lucide-react';
import { useRouter } from 'next/navigation';

export default function Pricing() {
  const router = useRouter();

  const monthProductId = "99ccafe0-47fa-4e93-8d6c-a165bf818986";
  const yearProductId = "672d32b7-fb76-452b-b682-79768f8e0085";

  const pricing = {
    tiers: [
      {
        title: "体验版",
        price: 0,
        nowPrice: 0,
        frequency: "",
        description: "注册使用，有限用量。",
        features: [
          "2 个主题",
          "10 个文案",
          "2 次视频字幕生成",
          "20 次ai创作",
          "30 次语音生成",
          "软件全部功能",
        ],
        cta: "免费注册使用",
        mostPopular: false,
      },
      {
        title: "月度会员",
        price: 39.8,
        nowPrice: 28.9,
        frequency: "/月",
        description: "适合个人用户，小规模使用。",
        features: [
          "20 个项目",
          "100 个文案",
          "每月 4 次视频字幕生成",
          "每月 300 次ai创作",
          "每月 300 次语音生成",
          "软件全部功能",
        ],
        cta: "购买一个月会员",
        mostPopular: false,
      },
      {
        title: "年度会员",
        price: 398,
        nowPrice: 289,
        frequency: "/年",
        description: "适合专业用户，适合使用频度较高的用户。",
        features: [
          "50 个项目",
          "1000 个文案",
          "每年 50 次视频字幕生成",
          "每年 3000 次ai创作",
          "每年 3000 次语音生成",
          "软件全部功能",
        ],
        cta: "购买一年会员",
        mostPopular: true,
      },
    ],
  };

  const handleBuy = async (plan: string) => {
    if (plan === "免费注册使用") {
      router.push('/register');
    } else if (plan === "购买一个月会员") {
    //   router.push(`/checkout/${monthProductId}`);
    } else if (plan === "购买一年会员") {
    //   router.push(`/checkout/${yearProductId}`);
    }
  };

  return (
    <div className="bg-white container mx-auto">
      <div className="relative">
        <div className="relative max-w-2xl mx-auto py-20  lg:max-w-7xl lg:py-20 ">
          <div className="relative text-center">
            <h1 className="text-3xl font-extrabold text-gray-900 sm:text-5xl sm:leading-none sm:tracking-tight lg:text-6xl">
              选择合适您的会员计划
            </h1>
            <p className="mt-6 mx-auto max-w-2xl text-xl text-gray-500">
              根据个人需求选择合适的会员计划，享受最优质的服务。
            </p>
          </div>
        </div>
      </div>

      <main>
        <section className="relative" aria-labelledby="pricing-heading">
          <h2 id="pricing-heading" className="sr-only">Pricing</h2>
          <div className="max-w-2xl mx-auto px-4 space-y-12 sm:px-6 lg:max-w-7xl lg:space-y-0 lg:px-8 lg:grid lg:grid-cols-3 lg:gap-x-8">
            {pricing.tiers.map((tier) => (
              <div
                key={tier.title}
                className="relative p-8 bg-white border border-gray-200 rounded-2xl shadow-sm flex flex-col hover:shadow-lg"
              >
                <div className="flex-1">
                  <h3 className="text-xl font-semibold text-gray-900">
                    {tier.title}
                  </h3>
                  {tier.mostPopular && (
                    <p className="absolute top-0 py-1.5 px-4 bg-rose-500 rounded-full text-xs font-semibold uppercase tracking-wide text-white transform -translate-y-1/2">
                      最受欢迎
                    </p>
                  )}
                  <p className="mt-4 flex items-baseline text-gray-900">
                    <span className="text-5xl font-extrabold tracking-tight">
                      ￥{tier.nowPrice}
                    </span>
                    <span className="text-xl font-extrabold tracking-tight line-through text-gray-400">
                      ￥{tier.price}
                    </span>
                    <span className="ml-1 text-xl font-semibold">
                      {tier.frequency}
                    </span>
                  </p>
                  <p className="mt-6 text-gray-500">{tier.description}</p>

                  <ul role="list" className="mt-6 space-y-6">
                    {tier.features.map((feature) => (
                      <li key={feature} className="flex">
                        <Check className="flex-shrink-0 w-6 h-6 text-rose-500" aria-hidden="true" />
                        <span className="ml-3 text-gray-500">{feature}</span>
                      </li>
                    ))}
                  </ul>
                </div>

                <button
                  onClick={() => handleBuy(tier.cta)}
                  className={`mt-8 block w-full py-3 px-6 border border-transparent rounded-md text-center font-medium ${
                    tier.mostPopular
                      ? 'bg-rose-500 text-white hover:bg-rose-600'
                      : 'bg-rose-50 text-rose-700 hover:bg-rose-100'
                  }`}
                >
                  {tier.cta}
                </button>
              </div>
            ))}
          </div>
        </section>

        <div className="py-12">&nbsp;</div>
      </main>
    </div>
  );
}
